ProcessGrid = function(config) {

    this.columnModel = new Ext.grid.ColumnModel( {
        defaults : {
            sortable : true,
            menuDisabled:false
        },
        columns : [{
            id: 'title',
            header : 'Process description',
            dataIndex : 'name',
            renderer : this.formatTitle,
            scope : this
        }, {
            header: 'Actions',
            align: 'center',
            renderer: this.renderActions,
            scope:this,
            width:100,
            sortable : false,
            menuDisabled:true
        }]
    });

    this.reader = new Ext.data.JsonReader({
        root : 'processes',
        totalProperty : 'totalCount',
        idProperty : 'id',
        fields : [{
            name : 'id'
        }, {
            name : 'key'
        }, {
            name : 'name'
        }, {
            name : 'resourceName'
        }, {
            name : 'version'
        }, {
            name : 'category'
        }, {
            name : 'deploymentId'
        }, {
            name : 'formKey'
        }]
    });

    this.dataStore = new Ext.data.Store( {
        proxy : new Ext.data.HttpProxy( {
            method : 'GET',
            url : DISPATCHER_CONTEXT + 'process/list'
        }),
        baseParams : {
            start:0,
            limit:PROCESS_LIST_PAGE_SIZE
        },
        reader: this.reader,
        sortInfo:{field: 'name', direction: "ASC"},
        remoteSort : true
    });

    Ext.apply(this, {
        colModel : this.columnModel,
        store : this.dataStore,
        bbar : new Ext.PagingToolbar({
            pageSize: PROCESS_LIST_PAGE_SIZE,
            store: this.dataStore,
            displayInfo: true
        }),
        stripeRows : true,
        viewConfig:{
            //forceFit:true,
//            enableRowBody:true,
//            showPreview:true,
//            getRowClass : this.applyRowClass
        },
        style: {
            height: '100%'
        },
        autoWidth : true,
        loadMask: {msg:'Loading...'},
        border : false,
        autoExpandColumn : 'title'
    });

    this.template = new Ext.Template([
          '<div style="float:left;">',
              '<img src="css/images/icons/1306016872_kservices.png">',
          '</div>',
          '<div class="topic">',
              '<b>{0}</b>',
              '<span class="author">Version: {1}</span></br>',
          '</div>'
    ]);
    this.template.compile();


    ProcessGrid.superclass.constructor.apply(this, [ config ]);

    this.subscribe('processPanelExpanded', function() {
        this.dataStore.load();
    }, this);

};

Ext.extend(ProcessGrid, Ext.grid.GridPanel, {

    // within this function "this" is actually the GridView
    applyRowClass: function(record, rowIndex, p, ds) {
        if (this.showPreview) {
            var xf = Ext.util.Format;
            p.body = '<p>Description: ' + xf.ellipsis(xf.stripTags(record.data.taskDescription), 200) + '</p>';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    },

    formatTitle: function(value, p, record) {
        return this.template.apply([
                            record.data.name,
                            record.data.version]);
    },

    createGridButton: function(config, id, record, grid) {
        Ext.applyIf(config,{
            text: null
            ,iconCls: 'button-navigation-refresh'
            ,cls:'button-grid-action'
            ,scale:'medium'
            ,handler : function(btn, e) {
                alert("Button clicked!");
            }
            ,listeners: {
                click: function(button, event) {
                    grid.getSelectionModel().selectRecords([record], false);
                }
            }

        });
        new Ext.Button(config).render(document.body, id);
    },

    renderActions: function(value, id, r) {
        var id = Ext.id();
        this.createGridButton.defer(1, this, [{
            text:'Start',
            iconCls:'button-start-process',
            handler : this.processStartHandler,
            scope:this
        }, id, r, this]);
        return('<div id="' + id + '"></div>');
    },

    processStartHandler: function () {
        var s = this.getSelectionModel();
        var r = s.getSelected();
        var formKey = r.get('formKey');
        if (formKey) {
            Ext.Ajax.request({
                url : DISPATCHER_CONTEXT + 'process/form',
                method : 'GET',
                params : {
                    formKey : formKey
                },
                success :function(response, opts){
                    var obj = Ext.decode(response.responseText);
                    if (obj.formConfig === undefined) {
                        obj.formConfig = {};
                    }
                    obj.processDefinitionId = r.get('id');
                    var formWindow = Ext.ComponentMgr.create(obj);
                    formWindow.show();
                }
            });
        }
    }

});

Ext.reg('processGrid', ProcessGrid);